<template>
  <ul class="process">
    <li>
      <h3>{{ $t("language.business.title1") }}</h3>
      <p>{{ $t("language.business.step1") }}</p>
      <p>{{ $t("language.business.step2") }}</p>
      <p>{{ $t("language.business.step3") }}</p>
    </li>
    <li>
      <NuxtImg src="/img/bb1.png" alt="" />
    </li>
  </ul>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.process {
  position: relative;
  color: #fff;
  width: 100%;
  @include flex(row, space-between, center);
  height: 100%;

  li:nth-child(1) {
    height: 100%;
    width: 60%;

    h3 {
      font-size: 30px;
      color: #fff;
      margin-top: 20px;
      font-weight: normal;
    }

    p {
      width: 100%;
      background: #3d4048;
      @include flex(row, flex-start, center);
      font-size: 18px;
      padding: 13px 15px;
      border-radius: 5px;
      border: 1px solid #3d4148;
      color: #b5bac8;
    }

    p {
      margin-top: 30px;
    }
  }

  li:nth-child(2) {
    position: relative;
    flex: 1;
    height: 100%;

    img {
      position: absolute;
      bottom: 0;
      right: 40px;
      height: 90%;
      display: block;

    }
  }

}
</style>
